<!DOCTYPE html>
<html>
<head>
   <title>Hello, World! example for mxGraph</title>

   <!-- 如果不在相同路径，设置basepath为开发库的路径 -->
	<script type="text/javascript">
		var mxBasePath = './';
	</script>
   <!-- 加载并初始化开发库 -->
   <script type="text/javascript" src="./js/mxClient.js"></script>
   <script type="text/javascript" src="./js/app.js"></script>
   <script type="text/javascript" src="./js/onit.js"></script>
   <script type="text/javascript" src="./js/FileSaver.js"></script>
   
   

   <!-- 示例代码 -->
   <script type="text/javascript">
	  var geditor;
   
      // 程序从这里开始。创建DOM节点中指定标记的简单图形。
      // 方法在文档的onLoad事件处理中被调用（如下所示）。
      function main(container){
         // 检查浏览器支持
         if (!mxClient.isBrowserSupported()){
            mxUtils.error('Browser is not supported!', 200, false);
         }else{
		 
			geditor = createEditor('./config/diagrameditor.xml');
			geditor.graph.setAllowLoops(false);
            try{
				var req = mxUtils.load('./data/profile.xml');   
				var root = req.getDocumentElement();   
				var dec = new mxCodec(root);
				dec.decode(root, geditor.graph.getModel()); 
            }
            finally{
			 //var encoder = new mxCodec();
			 //var result = encoder.encode(graph.getModel());
			 //var xmlString = mxUtils.getXml(result);
			 //console.error(xmlString);

             // 更新显示
             //graph.getModel().endUpdate();

            }
       
         }

			    
      };
         
   </script>
</head>

<!-- 页面传递图形的容器给程序 -->
<body onload="main(document.getElementById('graph'))">
	

   <!-- 创建一个带有网格背景图的容器 
   <div id="graphContainer"
      style="overflow:hidden;width:1250px;height:700px;background:url('images/grid.gif')">
   </div>-->
   
   
   <div  id="page" align="center" style="margin-bottom:45px">
		<div id="toolbar" style="width:98%;line-height: 25px;height: 25px;padding-left: 8px;padding-top: 1px; background: url('images/toolbar.gif');" align="left"></div>
		<div id="graph" tabindex="-1"
			style="width:98%;position: relative; height: 700px;background:url('images/grid.gif'); overflow: auto; cursor: default;border:1px solid #ccc;">
			<center id="splash" style="padding-top: 230px;">
				< img src='images/loading.gif'>
			</center>
		</div> 
	</div>
</body>
   	
</html>